<template>
  <div class=''>
    <Card style="margin:20px 100px 0 100px;height:650px;dispaly:block;">
        <div style="margin-bottom:20px">
            <Row>
                <Col span="9" style="width: 39.5%;">
                   <Button type="primary" icon="ios-arrow-back" @click="cancel">返回</Button>
                </Col>
                <Col span="5" style="text-align:center;width: 20.83333333%;"><h1>Element-Ui 富文本</h1></Col>
                <Col span="9" style="width: 39.5%;">
                    <div style="float:right">
                      <Button type="primary" icon="md-checkmark" @click="submit">确定</Button>
                    </div>
                </Col>
            </Row>
        </div>
        <quill-editor v-model="content" ref="text" style="height: 500px;" :options="editorOption"></quill-editor>
    </Card>
  </div>
</template>
<script>
import {  quillEditor } from 'vue-quill-editor'
export default {
  name: 'MyComponent',
  components:{
    quillEditor
  },
  data () {
    return {
     value:"",
     content: '',
     editorOption: {}
    }
  },
  methods:{
    cancel(){
      this.$router.go(-1);
    },
    submit(){
      console.log(this.$refs.text.value)
      // console.log(12312);
    }
  }
}
</script>

<style scoped lang='less'>
.map{
  width: 100%;
}
</style>
